<?= link_tag('assets/isotope/css/style.css'); ?>

<div class="topic">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <h3>Portfolio</h3>
            </div>
            <div class="col-sm-8">
                <ol class="breadcrumb pull-right hidden-xs">
                    <li>
                        <?= anchor('home/index', 'Home') ?>
                    </li>
                    <li class="active">Portfolio</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Content -->
<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <!-- Categories -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    Portfolio Category
                </div>
                <div class="panel-body">
                    <ul id="filters">
                        <li><a href="#" data-filter="*">All</a></li>
                        <?php foreach ($cat_array as $cat) : ?>
                            <li><a href="#" data-filter=".cat<?= $cat['id'] ?>"><?= $cat['name'] ?></a></li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="row" id="isotope-container">
                <?php foreach ($por_array as $por) : ?>
                    <div class="col-sm-6 col-md-6 col-lg-4 isotope-item<?php
                    foreach ($por['category'] as $por_cat) : echo ' cat' . $por_cat['por_cat_id'];
                    endforeach;
                    ?>">

                        <div class="portfolio-item">
                            <div class="portfolio-thumbnail">
                                <?php if (!empty($por['img'])) : ?>
                                    <img class="img-responsive" src="<?= $por_img_path . $por['img'][0]['img_url'] ?>" alt="<?= $por['slug'] ?>">
                                <?php else : ?>
                                    <img class="img-responsive" src="<?= $por_img_path . 'logo.png' ?>" alt="<?= $por['slug'] ?>">
                                <?php endif; ?>

                                <div class="mask">
                                    <p>
                                        <?php if (!empty($por['img'])) : ?>
                                            <a href="<?= $por_img_path . $por['img'][0]['img_url'] ?>" data-lightbox="template_showcase"><i class="fa fa-search-plus fa-2x"></i></a>
                                        <?php else : ?>
                                            <a href="<?= $por_img_path . 'logo.png' ?>" data-lightbox="template_showcase"><i class="fa fa-search-plus fa-2x"></i></a>
                                            <?php endif; ?>
                                            <?= anchor('portfolio/detail/' . $por['slug'], '<i class="fa fa-info-circle fa-2x"></i>') ?>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!--.portfolio-item-->
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div> <!-- / .row -->
</div> <!-- / .container -->

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="<?= $path ?>/isotope/js/isotope.min.js"></script>
<script type="text/javascript" src="<?= $path ?>/js/portfolio.js"></script>